<script setup lang="ts">
import {ref} from 'vue'
import {DevSearchTable} from "devecoui-plus";

const tableData = ref([
  {
    id: 1,
    name: '张三',
    age: 18,
    address: '北京'
  },
  {
    id: 2,
    name: '李四',
    age: 20,
    address: '上海'
  },
  {
    id: 3,
    name: '王五',
    age: 22,
    address: '广州'
  },
  {
    id: 4,
    name: '赵六',
    age: 24,
    address: '深圳'
  },
  {
    id: 5,
    name: '孙七',
    age: 26,
    address: '杭州'
  },
  {
    id: 6,
    name: '周八',
    age: 28,
    address: '南京'
  },
  {
    id: 7,
    name: '吴九',
    age: 30,
    address: '苏州'
  },
  {
    id: 8,
    name: '郑十',
    age: 32,
    address: '成都'
  }
]);
const searchTableProps = ref({
  columns: [
    {
      label: 'Id',
      prop: 'id',
      width: '100',
      align: 'center',
    },
    {
      label: '姓名',
      prop: 'name',
      width: '200',
      align: 'center',
    },
    {
      label: '年龄',
      prop: 'age',
      minWidth: '400',
      align: 'center',
    },
    {
      label: '省份',
      prop: 'address',
      fixed: 'right',
      align: 'center',
      width: '300',
      tips: '学生所在的省份',
    }
  ],
  data: tableData.value,
  openSortable: true,// 开启拖拽
  openRequest: false,
  elTableAttrs: {
    'scrollbar-always-on': true
  }
});


const sortTableChange = (val: any) => {
  tableData.value = val;
  console.log('拖拽后的数据', val);
}
</script>

<template>
  <div style="margin-bottom: 10px">
    <h4>为了方便展示数据信息变化</h4>
    {{ tableData }}
  </div>
  <dev-search-table @sort-table-change="sortTableChange" v-bind="{...searchTableProps}"/>
</template>
